<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="../../public/js/webuploader/webuploader.css" rel="stylesheet" type="text/css">
    <script src="../../public/js/jquery-1.11.3.min.js"></script>
    <script src="../../public/js/webuploader/webuploader.min.js"></script>

</head>
<body>
    <div id="uploader-demo" class="wu-example">
        <div id="filelist" class="uploader-list"></div>
        <div class="btns">
            <div class="pickers"></div>
            <button id="ctlBtn" class="btn btn-default">开始上传</button>
        </div>
    </div>
<script>
   var $ = jQuery
    var $list = $("#filelist")
    var ratio = window.devicePiexlRatio || 1;

    var thumbnailWidth  = 100 * ratio
    var thumbnailHeight = 100 * ratio

    var uploader = WebUploader.create({
        auto:false,//自动上传
        swf:"../../public/js/webuploader/webuploader.swf",
//        server:"http://webuploader.duapp.com/server/fileupload.php",
        server:"./upload_01.php",
        pick:{
            id:".pickers",
            label:"选择文件"
        },

        accept:{
            title:"images",
            extensions:"gif,jpg,jpeg,bmp,png",
            mimeTypes:"images/*"
        }
    })

    uploader.on("fileQueued", function (file) {
        var $li = $('<div id="' +file.id+'" class="file-item thumbnail"><img>' +
                '<div class="info">' +file.name+'</div></div>')
        var $img = $li.find("img")

        $list.append($li)

        uploader.makeThumb(file, function (error, src) {
            if(error){
                $img.replaceWith("<span>不能预览</span>")
                return
            }

            $img.attr("src",src)
        },thumbnailWidth,thumbnailHeight)
    })

    uploader.on('uploadProgress', function (file,percentage) {
        var $li = $('#'+file.id)
        var $percent = $li.find('.progress span')

        if(!$percent.length){
            $percent = $('<p class="progress"><span></span></p>').appendTo($li).find('span')
        }
        $percent.css('width',percentage*100+'%')
    })

    uploader.on('uploadSuccess', function (file) {
        $('#'+file.id).addClass('upload-state-done')
    })

    uploader.on('uploadError', function (file) {
        var $li = $('#'+file.id)
        var $error = $li.find('div.error')

        if(!$error.length){
            $error = $('<div class="error" style="background-color: #00a2d4"></div>').appendTo($li)
        }

        $error.text("上传失败")
    })

    uploader.on('uploadComplete',function(file){
        $('#'+file.id).find('.progress').remove()
    })

    var $upload = $('#ctlBtn')
    $upload.on('click', function () {
        uploader.upload()
    })
</script>
</body>
</html>